<div id="containter" class="clearfix" style="margin-right:200px;">
	<div class="content-left">
		<div class="chat-above" id="above">
			<div class="clearfix message connect-message"> 
				<span id="connect-message" style="background-color:#FFFFFF;color:#4665d4;">
					<a href="javascript:void(0)" style="color:#4665d4;">
						<i class="layui-icon">&#xe63a;</i>
						查看更多消息
					</a>
				</span>
			</div>
			<#if chatMessageList?? && chatMessageList.content>
			<#list chatMessageList.content?reverse as chatMessage>
				<#if chatMessage.userid?? && chatMessage.userid == user.id>
					<div class="clearfix chat-block">
						<div class="chat-right"> 
							<img class="user-img" src="/im/img/user.png" alt="">
							<div class="chat-message">
								<label class="time">${chatMessage.createtime!''}</label>
								<label class="user">${user.uname!''}</label> 
							</div>
							<div class="chatting-right">
								<i class="arrow"></i>
								<div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
							</div>
						</div>
					</div>
				<#else>
					<#if imGroupUserList??>
					<#list imGroupUserList as imGroupUser>
						<div class="clearfix chat-block">
							<div class="chat-left"> 
								<img class="user-img" src="/im/img/user.png" alt="">
								<div class="chat-message">
									<label class="user">${imGroupUser.user.uname!''}</label> 						
									<label class="time">${chatMessage.createtime!''}</label>
								</div>
								<div class="chatting-left">
									<i class="arrow"></i>
									<div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
								</div>
							</div>
						</div>
						<#break/>
					</#list>
					</#if>
				</#if>
			</#list>
			</#if>
		</div>   
		<div class="chat-bottom" id="bottom">
			<textarea id="message" name="content" style="visibility:hidden;"></textarea>
			<div class="btn-push clearfix">
				<div style="float:left;height:24px;line-height:34px;margin: 5px 20px 10px 5px;" id="surplus">0/200</div>
				<button type="button" class="send-btn active special  clearfix" id="sent" onclick="sendMessage()" style="background-color:#32c24d;font-weight: 200;padding:5px;">
					发送
				</button>
			</div>
		</div> 
	</div>
	<div class="content-rig">
		<div class="content-head">
			<p>群公告</p>
		</div>
		<div class="content-list ukefu-group-tipmsg" id="group-tipmessage">
			<#include "/apps/entim/group/tipmsg.html">
		</div>
		<div class="content-head">
			<p>群应用</p>
		</div>
		<div class="content-list" style="margin-top: 0px;">
			<ul class="ukefu-group-apps">
				<li class="ukefu-group-app">
					<a href="/ent/im/group/user.html?id=${imGroup.id}">
						<div class="ukefu-group-app-icon"><i class="layui-icon">&#xe613;</i></div>
						<div class="ukefu-group-app-name">成员</div>
					</a>
				</li>
				<li class="ukefu-group-app">
					<a href="javascript:void(0)" onclick="group()">
						<div class="ukefu-group-app-icon"><i class="layui-icon">&#xe63a;</i></div>
						<div class="ukefu-group-app-name">公告</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="content-head">
			<p>群成员（${imGroupUserList?size}）</p>
		</div>
		<div class="content-list" style="margin-top: 0px;">
			<ul class="ukefu-user-list ukefu-group" style="display:block;">
				<#if imGroupUserList??>
				<#list imGroupUserList as imGroupUser>
					<li id="gruop_user_${imGroupUser.user.id}">
						<a href="javascript:void(0)" <#if imGroupUser.user.id != user.id>onclick="openchat('/ent/im/chat.html?userid=${imGroupUser.user.id!''}' , '/images/user-pc.png' , '${imGroupUser.user.uname!''}' , '${imGroupUser.user.id!''}' , '最近登陆:${imGroupUser.user.lastlogintime}');"</#if>>
							<img src="/images/user-pc.png">
							<span>${imGroupUser.user.uname!''}</span>
						</a>
						<#if imGroupUser.admin || imGroupUser.user.id == user.id>
							<div class="admin">
								<#if imGroup.creater == imGroupUser.user.id>
									<img src="/images/creater.png" title="创建人">
								<#elseif imGroupUser.admin == true>
									<img src="/images/admin.png" title="系统管理员">
								</#if>
							</div>
						</#if>
					</li>
				</#list>
				</#if>
			</ul>    
		</div>
	</div>
</div>
<script type="text/javascript">
	var editor , words;
	KindEditor.ready(function (K) {
		editor = K.create('textarea[name="content"]', {
			autoHeightMode: false,
			width: "100%",
			resizeType: 0,
			themeType: 'simple',
			fontsize: 14,
			newlineTag : "br" , 
			filterMode:true,
			items: ['emoticons', 'cut'],
			afterChange : function() {
				var count = this.count() ;
				
				words = this.count("text") ;
				var pattern = '字数：' + words + '字'; 
				document.getElementById('surplus').innerHTML = "字符： "+count+"  ，文字：" + pattern; //输入显示
				 ////////
			},
			afterCreate : function() { //设置编辑器创建后执行的回调函数
	            var self = this;
	            //Ctrl+Enter提交表单
	            K.ctrl(document, 13, function() {
	                self.sync();
	                sendMessage();
	            });
	            K.ctrl(self.edit.doc, 13, function() {
	                self.sync();
	                sendMessage();
	            });
	        }
		});
	});
	KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
	var R3Ajax = {
		ajax:function(opt){
			var xhr = this.createXhrObject();
			xhr.onreadystatechange = function(){
				if(xhr.readyState!=4) return ;
				(xhr.status===200 ?
					opt.success(xhr.responseText,xhr.responseXML):
					opt.error(xhr.responseText,xhr.status));
			}
			xhr.open(opt.type,opt.url,true);
			if(opt.type!=='post') 
				opt.data=null;
			else
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			opt.data = this.parseQuery(opt.data);
			xhr.send(opt.data);
		},
		post:function(url,success,data){
			var popt = {
				url:url,
				type:'post',
				data:data,
				success:success,
				error:function(data){}
			}
			this.ajax(popt);
		},
		get:function(url,success){
			var gopt = {
				url:url,
				type:'get',
				success:success,
				error:function(){}
			}
			this.ajax(gopt);
		},
		createXhrObject:function(){
			var methods = [
				function(){ return new XMLHttpRequest();},
				function(){ return new ActiveXObject('Msxml2.XMLHTTP');},
				function(){ return new ActiveXObject('Microsoft.XMLHTTP');}
			];
			for(var i=0;len=methods.length,i<len;i++){
				try{
					methods[i]();
				}catch(e){
					continue;
				}
				this.createXhrObject = methods[i];
				return methods[i]();
			}
			throw new Error('Could not create an XHR object.');
		},
		parseQuery:function(json){
			if(typeof json == 'object'){
				var str = '';
				for(var i in json){
					str += "&"+i+"="+encodeURIComponent(json[i]);
				}
				return str.length==0 ? str : str.substring(1);
			}else{
				return json;
			}
		}
	};
	Date.prototype.format = function(fmt) { 
		 var o = { 
			"M+" : this.getMonth()+1,                 //月份 
			"d+" : this.getDate(),                    //日 
			"h+" : this.getHours(),                   //小时 
			"m+" : this.getMinutes(),                 //分 
			"s+" : this.getSeconds(),                 //秒 
			"q+" : Math.floor((this.getMonth()+3)/3), //季度 
			"S"  : this.getMilliseconds()             //毫秒 
		}; 
		if(/(y+)/.test(fmt)) {
				fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
		}
		 for(var k in o) {
			if(new RegExp("("+ k +")").test(fmt)){
				 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
			 }
		 }
		return fmt; 
	} 
	var R3Helper = {
		resize : function(){
			var height = document.body.offsetHeight ;
			document.getElementById('above').style.height = (height - 194 - 50)+"px" ;
		}
	}
	function openchat(url , img , name, id , text){
		top.layer.open({
			  type: 2,
			  id : id,
			  title: ["<div style='position: relative;height: 42px;padding: 5px 15px 5px 0px;line-height: 20px;cursor: pointer;display: inline-block;vertical-align: top;' id='dialog_"+id+"'><img src='"+img+"' style='max-height:50px;'><div style='padding:0px 5px;line-height: 23px;display: inline-block;vertical-align: top;'><span style='vertical-align: top;font-size:18px;'>"+name+"<span class='ukefu-entim-status offline' id='chat_"+id+"' title='离线'><i class='layui-icon'></i></span></span><p style='vertical-align: top;font-size: 12px;color: #999;'>"+text+"</p></div></div>" , "height:55px"],
			  closeBtn: 1, //不显示关闭按钮
			  shade: false,
			  area: ['700px', '520px'],
			  maxmin: true, 
			  anim: 2,
			  shade: 0,
			  content: url
		  });
	}
</script>
<script>
	layui.use('element', function(){
	  var $ = layui.jquery
	  ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
	});
	var hostname = location.hostname ;
	var socket = io.connect("http://"+top.hostname+":"+top.port+"/im/ent?userid=${user.id!''!''}&orgi=${user.orgi!''}&contextid=${contextid!''}&group=${contextid!''}");

	socket.on('message', function(data) {
		var chat=document.getElementsByClassName('chatting-left').innerText;
		chat = data.message;
		var user = data.username ;
		if(data.userid == "${user.id!''}"){
			output('<div class="chat-right"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label class="time">'+data.createtime+'</label><label  class="user">'+user+'</label> </div><div class="chatting-right"><i class="arrow"></i><div class="chat-content">'+chat+'</div></div>' , "chat-block");
		}else{
			output('<div class="chat-left"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label  class="user">${entimuser.uname!''}</label><label class="time">'+data.createtime+'</label> </div><div class="chatting-left"><i class="arrow"></i><div class="chat-content">'+chat+'</div></div>' , "chat-block");	
		}    
	});
	function sendMessage() {
		editor.sync();
		var count = editor.count("text");
		if(count>0){
			var message = document.getElementById('message').value;
			if(message!= ""){ 
				socket.emit('message', {
					userid:"${user.id!''}",
					type:"message" ,
					username:"${user.uname!''}",
					session:"${user.id!''}",
					touser:"${contextid!''}",
					contextid:"${contextid!''}",
					orgi:"${user.orgi!''}",
					model:"entim",
					chatype:"group",
					message : message
				});
			}
		}
		editor.html('');
	}
	function output(message , clazz) {
		if(clazz == "message connect-message"){
			var messages = document.getElementsByClassName("connect-message") ;
			for(inx =0 ; inx < messages.length ; ){
				document.getElementById('above').removeChild(messages[inx]) ;
				inx++ ;
			}			
		}
		var element = ("<div class='clearfix "+clazz+"'>" +" " + message + "</div>");
		document.getElementById('above').innerHTML= (document.getElementById('above').innerHTML + element);
		document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
	}
	document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
	top.$('#chat_${imGroup.id}').removeClass('offline').addClass('online').attr('title' , '在线');
	function group(){
		layer.open({
			  title: '公告' ,
			  type: 1
			  ,id:'tipmsg'
			  ,content: '<div><div id="" class="layui-layer-content ukefu-entim-search"><#if user.id = imGroup.creater><textarea type="text" id="tipmsgcontent" class="layui-layer-input" style="height:100px;widht:300px;"></textarea><#else>${imGroup.tipmessage!''}</#if></div></div>'
			  ,btn: ['保存','关闭']
			  ,shade: 0 //不显示遮罩
			  ,yes: function(){
				  loadURL('/ent/im/group/tipmsg.html?id=${imGroup.id!''}&tipmsg='+encodeURIComponent($('#tipmsgcontent').val()) , '#group-tipmessage');
				  layer.closeAll();
			  }
		});
	}
</script>